<template>
    <div>
        <div class="search-content"></div>
        <div class="search-list">
            <el-table :data="goodsList" :height="oHeight">
                <!-- <el-table-column align="center" type="selection" width="55">
                </el-table-column>-->
                <el-table-column
                    align="center"
                    prop="id"
                    label="品牌logo"
                    min-width="120"
                    #default="{ row }"
                >
                    <img :src="row.brand_icon" alt style="width: 50px" />
                </el-table-column>
                <el-table-column align="center" prop="brand_name" label="品牌名称" min-width="120"></el-table-column>
                <el-table-column align="center" prop="goods_num" label="品牌商品数" min-width="120"></el-table-column>
                <el-table-column
                    align="center"
                    prop="updatetime"
                    label="修改时间"
                    min-width="160"
                    #default="{ row }"
                >{{row.updatetime*1000|dateFormatter('YYYY-MM-DD hh:mm:ss')}}</el-table-column>
                <el-table-column align="center" prop="brand_sort_by" label="商品排序" min-width="120"></el-table-column>
                <el-table-column
                    align="center"
                    prop="if_show"
                    label="是否显示"
                    min-width="120"
                    #default="{ row }"
                >
                    <el-switch
                        v-model="row.if_show"
                        @change="(val)=>{changeShow(val,row)}"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="1"
                        inactive-value="0"
                    ></el-switch>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="brand_sort"
                    label="logo排序"
                    min-width="120"
                    #default="{ row }"
                >
                    <el-input
                        v-model="row.brand_sort"
                        style="width: 60px;text-align:center;"
                        @input="
                            (value) => {
                                inputSort(value, row.category_id);
                            }
                        "
                    ></el-input>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="isInitiative"
                    label="操作"
                    min-width="200"
                    #default="{ row }"
                >
                    <div style="color: #5790bb">
                        <span @click="showGoods(row)">查看商品</span>
                        <el-divider direction="vertical"></el-divider>
                        <span @click="editGood(row)">编辑</span>
                        <el-divider direction="vertical"></el-divider>
                        <span @click="delGood(row.category_id)">删除</span>
                    </div>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group">
                    <!-- <el-button
                        size="mini"
                        type="primary"
                        class="btn-bottom"
                        @click="expertData"
                        >导出</el-button
                    >-->
                    <el-button size="mini" type="primary" class="btn-bottom" @click="showFn()">新增</el-button>
                    <!-- <button type="button" class="btn-bottom" @click="showDeleteDialog">删除</button> -->
                </div>
                <!--分页部分-->
                <div class="paginationOne">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="searchContent.currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="searchContent.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <list-drawer ref="brandDrawer"></list-drawer>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import listDrawer from './brand-list-drawer'
export default {
    components: { listDrawer },
    data() {
        return {
            goodsList: [],
            oHeight: 800,
            searchContent: {
                currentPage: 1,
                pageSize: localStorage.getItem('pageSize') * 1 || 10,
            },
            total: 0,
        };
    },
    created() {
        this.getList();
    },
    methods: {
        showGoods(row) {
            this.$router.push('/home/operate-panel/points-mall/commodity?id='+row.category_id);
        },
        inputSort(val, id) {
            console.log(val, id);
            let obj = {
                category_id: id,
                brand_sort: val
            }
            this.$http.post('/admin/pointprod/index.php?act=pointBrand&op=update', obj).then((res) => {
                if (res.code === 1) {
                    this._message('success', res.msg);
                } else {
                    this._message('error', res.msg);
                }
            }, err => {
                this._message('error', res.msg);
            })
        },
        changeShow(val, row) {
            let old = val == 1 ? '0' : '1'
            let obj = {
                category_id: row.category_id,
                if_show: val
            }
            this.$http.post('/admin/pointprod/index.php?act=pointBrand&op=update', obj).then((res) => {
                if (res.code === 1) {
                    this._message('success', res.msg);
                } else {
                    this._message('error', res.msg);
                    setTimeout(() => { row.if_show = old; }, 100)
                }
            }, err => {
                this._message('error', res.msg);
                setTimeout(() => { row.if_show = old; }, 100)
            })
        },
        showFn(data) {
            this.$refs.brandDrawer.show_dialog_fn(data);
        },
        expertData() {
            /* var host = location.host.replace('admin', api);
            var url = location.protocol + "//" + host + '/admin/appointment/index.php?act=appoint&op=appointList&is_export=1';
            var searchData = this.searchObj;
            for (var key in searchData) {
                if (!(searchData[key] === null || searchData[key] === '' || searchData[key] === undefined || key === 'page' || key === 'pageSize' || key === 'currentPage')) {
                    url += '&' + key + '=' + searchData[key]
                }
            }
            console.log(url);
            window.location.href = url; */
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize);
            this.searchContent.pageSize = pageSize;
            this.searchContent.currentPage = 1;
            this.getList();
        },
        handleCurrentChange(page) {
            this.searchContent.currentPage = page;
            this.getList();
        },
        getList() {
            let params = {
                pageSize: this.searchContent.pageSize,
                page: this.searchContent.currentPage
            }
            this.$http('/admin/pointprod/index.php?act=pointBrand&op=list', {
                params
            }).then(res => {
                console.log(res)
                if (res.code === 1) {
                    this.total = res.data.totalCount;
                    this.goodsList = res.data.list || [];
                } else {
                    this.goodsList = [];
                }
            })
        },
        delGood(category_id) {
            this.$http.get('/admin/pointprod/index.php?act=pointBrand&op=del', {
                params: {
                    category_id
                }
            }).then(res => {
                console.log(res)
                if (res.code === 1) {

                } else {
                    this._message('error', res.msg)
                }
            })
        },
        editGood(row) {
            this.$refs.brandDrawer.show_dialog_fn(row);
        },
    },
    mounted() {
        resize(this)
    },
};
</script>
<style lang="scss" scoped>
.el-table {
    border: 1px solid #ebeef5;
    border-bottom: none;
}
.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.el-input /deep/input {
    text-align: center;
}
</style>